<!-- 需要配置后台才可以使用 -->
<template>
  <div class="fixed top-[20%] left-[50%] translate-x-[-50%] w-[340px] h-[270px] text-sm bg-white dark:bg-zinc-800 rounded
      border border-zinc-200 dark:border-zinc-900 shadow-2xl">
    <!--    头-->
    <div class="flex items-center h-5 text-left px-1 mb-1">
      <span class="flex-grow  dark:text-zinc-200">请完成安全验证</span>
      <mine-svg-icon name="refresh"
                     fillClass="fill-zinc-900 dark:fill-zinc-200"
                     class="w-3 h-3 p-0.5 rounded-sm duration-300 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-900"
                     @click="onReset">
      </mine-svg-icon>
      <mine-svg-icon name="close"
                     fillClass="fill-zinc-900 dark:fill-zinc-200"
                     class="w-3 h-3 p-0.5 rounded-sm duration-300 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-900 ml-2 "
                     @click="onClose">
      </mine-svg-icon>
    </div>
    <!--    captcha-->
    <div id="captcha"></div>
  </div>
</template>

<script>
const EMITS_CLOSE = "close"
const EMITS_SUCCESS = "success "
</script>

<script setup>
import '@/vendor/slider-captcha/longbow.slidercaptcha.min.js'
import '@/vendor/slider-captcha/slidercaptcha.min.css'
import {onMounted} from "vue";

const emits = defineEmits([EMITS_CLOSE, EMITS_SUCCESS])


/**
 * 使用人类行为验证
 */
let captcha = null
onMounted(() => {
  const captcha = sliderCaptcha({
    //渲染位置
    id: 'captcha',
    //用户拼图成功之后的回调
    onSuccess(arr) {
      emits(EMITS_SUCCESS)
    },
    //用户拼图失败之后的回调
    onFail() {
      emits(EMITS_SUCCESS)
    },
    //默认的验证方法
    verify() {

    }
  })
})

/**
 * 重置
 */
const onReset = () => {
  captcha.reset()
}
/**
 * 关闭
 */
const onClose = () => {
  emits(EMITS_CLOSE)
}

</script>
